<template>
  <footer :class="` ${foot} overflow-hidden w-full`"    
    @mouseenter="enter"
    @mouseleave="leave"
  >
    <div ref="footDom" class="footBox w-full py-8   transform translate-y-100%">
      <div  class="px-6% md:px-12% lg:px-17% text-black font-bold sm:text-sm md:text-lg transition-all">
        <!-- 底部内容 -->
        <div class="flex justify-between flex-wrap">
          <div>gitee:<a href="https://gitee.com/lairtree/vue-bs2022" class="hover:text-green-300">https://gitee.com/lairtree/vue-bs2022</a></div>
          <div class="w-80%">© 2022 毕业设计 邮箱1711255749@qq.com</div>
          <div>By LairTree and zzzt6</div>
        </div>
      </div>
    </div>
  </footer>

</template>
<script setup lang="ts">
import { storeToRefs } from "pinia"; 
import { useUtilsStore } from '@/store';
import { useResizeObserver } from '@vueuse/core'
import { gsap } from "gsap"

//foot-css
const foot = ref("absolute bottom-0") 
//utilsStore
const utilsStore = useUtilsStore()
const { skeletonLoading } = storeToRefs(utilsStore)

//文档长度
const htmlHeight = ref<number>(0)

//监视body长度变动
useResizeObserver(document.body, (entries) => {
  const entry = entries[0]
  const { height } = entry.contentRect
  htmlHeight.value = height
})

//footDom
const footDom = ref()
//进入
const enter = ()=>{
  gsap.fromTo(footDom.value, { translateY: "100%" },{translateY:0})
}
//离开
const leave = () => {
  gsap.fromTo(footDom.value, { translateY: 0 }, { translateY: "100%" })
}

watch([htmlHeight, skeletonLoading], async ()=>{
  
  await nextTick()
  const clientHeight = document.documentElement.clientHeight
  if (htmlHeight.value <= clientHeight) {
    foot.value = "absolute bottom-0"
  } else {
    foot.value = ""
  }
  
})


</script>
<style scoped lang="scss">
.footBox{
  background-color: rgb(255, 255, 255) ;
  background: url("../assets/footend.jpg");
  // mix-blend-mode: luminosity;
  filter:grayscale(70%);
}
</style>
